<template>
	<view style="background-color: #efefef;">
		<!-- 安卓 带tabBar的自定义头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<uni-nav-bar statusBar=true backgroundColor="#3476f1" color="#fff" class="header" fixed="true">
			<!-- 导航栏左边插入 -->
			<view slot="left" class="header_left" style="font-size: 38rpx;">首页</view>
			<!-- 导航栏中间插入 -->
			<view slot="default" class="header_search">
				<image src="../../static/index/header03.png" mode="" class="search_icon"></image>
				<input type="search" value="" placeholder="搜索相关信息" class="search_input" style="height: 60rpx;" />
			</view>
			<!-- 导航栏右边插入 -->
			<view slot="right" class="header_right">
				<image src="../../static/index/header01.png" mode=""></image>
				<image src="../../static/index/header02.png" mode=""></image>
			</view>
		</uni-nav-bar>
		<!-- #endif -->

		<!-- 微信 带tabBar的自定义头部 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="header">
			<view class="header_left">
				首页
			</view>
			<view class="header_search">
				<image src="../../static/index/header03.png" mode="" class="search_icon"></image>
				<input type="search" value="" placeholder="搜索相关信息" class="search_input" />
			</view>
			<view class="header_right">
				<image src="../../static/index/header01.png" mode=""></image>
				<image src="../../static/index/header02.png" mode=""></image>
			</view>
		</view>
		<!-- #endif -->

		<!-- 轮播图 -->
		<view class="banner_bg">
			<view class="banner">
				<swiper circular="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/index/banner.png" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/index/banner.png" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 导航栏 -->
		<view class="nav">
			<view class="nav_contents" v-for="item in navData" :key="item.id" @tap="mean(item.url)">
				<image :src="item.src" mode=""></image>
				<text class="nav_title">{{item.title}}</text>
			</view>
		</view>

		<!-- 主要内容 -->

		<!-- 第一行 -->
		<view class="main_stock">
			<text>A股票</text>
			<text style="margin: 0 20rpx 0 10rpx;">实时金价格</text>
			<text style="color: #f85656;">373.00</text>
			<text style="margin:0 34rpx 0 112rpx;color: #f85656;">-4.92</text>
			<text style="color: #f85656;">-1.19%</text>
		</view>

		<!-- 分区内容 -->
		<view class="main">
			<!-- 财富直通车 -->
			<view class="main_treasure">
				<!-- 内容标题 -->
				<view class="treasure_headline">
					<view class="blue"></view>
					<view class="title">
						<text>财富直通车</text>
					</view>
				</view>
				<!-- 内容 -->
				<view class="treasure_concents">
					<view class="concents_left">
						<view class="">
							<text style="font-size: 40rpx;font-weight: 700;">
								钱袋子保卫战
							</text>
						</view>
						<view class="" style="margin-top: 26rpx;">
							<text style="font-size: 28rpx;">
								领取你的避坑宝典
							</text>
						</view>
						<view class="" style="margin-top: 10rpx;">
							<text style="font-size: 28rpx;">
								还可
							</text>
							<text style="font-size: 32rpx;color: #be7f22;margin-top: 20rpx;">
								参与有奖互动
							</text>
						</view>
						<view class="" style="margin-top: 20rpx;">
							<text style="font-size: 28rpx;color: #ffeed2;">
								3月5日-3月8日
							</text>
						</view>
						<view class="left_btn" style="margin-top: 50rpx;vertical-align: middle;">
							<text>立即参加</text>
							<uni-icons type="arrowright" color="#fff"></uni-icons>
						</view>
					</view>
					<view class="concents_right">
						<view class="right_top">
							<view class="">
								<text style="color: #fff;font-size:28rpx;font-weight: 700;">牛年有金喜</text>
							</view>
							<view class="">
								<text style="color: #fff;color: #ffeed2;">每天抽2021元红包</text>
							</view>
							<view class="right_btn">
								<text>立即参加</text>
								<uni-icons type="arrowright" color="#fff"></uni-icons>
							</view>
						</view>
						<view class="right_bottom">
							<view class="">
								<text style="color: #fff;font-size:28rpx;font-weight: 700;">瓜分一吨黄金</text>
							</view>
							<view class="">
								<text style="color: #fff;color: #ffeed2;">年终福利 人人有份</text>
							</view>
							<view class="right_btn">
								<text>立即抢购</text>
								<uni-icons type="arrowright" color="#fff"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 贷款服务 -->
			<view class="main_loans">
				<!-- 头 -->
				<view class="loans_headline">
					<view class="blue"></view>
					<view class="title">
						<text>贷款服务</text>
					</view>
				</view>
				<!-- 内容 -->
				<view class="loans_concents">
					<view class="concents_top">
						<text style="color: #333;font-size: 30rpx;margin-right: 20rpx;">
							轻松贷款
						</text>
						<text style="font-size: 24rpx;color: #9a9a9a;">
							最低日利率0.02% | 快速提现
						</text>
					</view>
					<view class="concents_bottom">
						<view class="left_title">
							<text style="font-size: 44rpx;color: #f85656;font-weight: 700;display: block;">
								200,000,00
							</text>
							<text style="font-size: 24rpx;color: #9a9a9a;">
								最高可借额度(元)
							</text>
						</view>
						<view class="right_btn" @tap="borrow">
							<text>
								获取我的额度
							</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 王牌理财 -->
			<view class="main_money">
				<!-- 内容标题 -->
				<view class="money_headline">
					<view class="blue"></view>
					<view class="title">
						<text>王牌理财热销榜</text>
					</view>
					<view class="more">
						<uni-icons type="arrowright" color="#a3a3a3"></uni-icons>
					</view>
				</view>
				<!-- 内容 -->
				<view class="money_concents">
					<!-- 切换 -->
					<view class="concents_top">
						<view class="top_title" @tap="changtap(0)" :class="{ active: nav_show == 0 }">
							<text>短期精选</text>
						</view>
						<view class="top_title" @tap="changtap(1)" :class="{ active: nav_show == 1 }">
							<text>保险理财</text>
						</view>
						<view class="top_title" @tap="changtap(2)" :class="{ active: nav_show == 2 }">
							<text>稳健理财</text>
						</view>
						<view class="top_title" @tap="changtap(3)" :class="{ active: nav_show == 3 }">
							<text>基金爆品</text>
						</view>
					</view>
					<!-- 切换内容 -->
					<swiper :duration="1000" style="height: 380rpx;" @change="huan" :current="nav_show">
						<swiper-item>
							<view class="concents_centre">
								<!-- 一条 -->
								<view class="centre_centent" v-for="item in currentData" :key="item.id">
									<view class="top_title">
										<text style="font-size: 28rpx;color: #333;">
											{{item.type}}
										</text>
										<text style="font-size: 28rpx;color: #333;margin: 0 20rpx;">
											{{item.title}}
										</text>
										<text class="title_mt">
											{{item.title_mt}}
										</text>
									</view>
									<view class="bottom_title">
										<view class="title_one">
											<text
												style="display: block; font-size: 44rpx;font-weight: 700;color: #f85656;">
												{{item.prcent}}
											</text>
											<text style="font-size: 24rpx;color: #868686;">
												{{item.prent_title}}
											</text>
										</view>
										<view class="title_two">
											<text
												style="display: block; font-size: 32rpx;font-weight: 700;color: #333;">
												{{item.title_type}}
											</text>
											<text style="font-size: 24rpx;color: #868686;">
												{{item.title_text}}
											</text>
										</view>
										<view class="title_btn" @tap="toCurrentMess(item.title)">
											<text>
												去抢购
											</text>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="">保险理财</view>
						</swiper-item>
						<swiper-item>
							<view class="">稳健理财</view>
						</swiper-item>
						<swiper-item>
							<view class="">基金爆品</view>
						</swiper-item>
					</swiper>

				</view>
			</view>
			<!-- 爆款推荐 -->
			<view class="main_recommend">
				<!-- 内容标题 -->
				<view class="recommend_headline">
					<view class="blue"></view>
					<view class="title">
						<text>爆款推荐</text>
					</view>
					<view class="more">
						<uni-icons type="arrowright" color="#a3a3a3"></uni-icons>
					</view>
				</view>
				<!-- 内容 -->
				<scroll-view scroll-x="true">
					<view class="recommend_concents">
						<view class="concents_modules" id="item" v-for="item in 4" :key="item">
							<view class="modules_titleone">
								<text>
									天宏永利债券B
								</text>
							</view>
							<view class="modules_titletwo">
								<text>
									15.05
								</text>
								<text style="font-size: 24rpx;">%</text>
							</view>
							<view class="modules_titlethree">
								<text>
									近一年涨幅
								</text>
							</view>
							<view class="modules_titlefour">
								<text class="text">
									严控风险
								</text>
								<text class="text">
									债券型
								</text>
							</view>
						</view>

					</view>
				</scroll-view>
			</view>
			<!-- 理财优选 -->
			<view class="main_optimization">
				<!-- 内容标题 -->
				<view class="optimization_headline">
					<view class="blue"></view>
					<view class="title">
						<text>理财优选</text>
					</view>
				</view>
				<view class="optimization_concent">
					<!-- 一条 -->
					<view class="list_sty">
						<view class="left">
							<text style="font-size: 44rpx;color: #f85656;font-weight: 700;">3.90</text>
							<text style="font-size: 28rpx;color: #f85656;">%</text>
							<text
								style="display: block;font-size: 24rpx;color: #999999;margin-top: 26rpx;">业绩比较基准</text>
						</view>
						<view class="right">
							<text class="r_text">远见开放19（号去物业团区委）</text>
							<view class="three_text">
								<view class="tt">1万元起购</view>
								<view class="tt">稳健收益</view>
								<view class="tt">净值型</view>
							</view>
						</view>
					</view>
					<!-- 一条 -->
					<view class="list_sty">
						<view class="left">
							<text style="font-size: 44rpx;color: #f85656;font-weight: 700;">3.90</text>
							<text style="font-size: 28rpx;color: #f85656;">%</text>
							<text
								style="display: block;font-size: 24rpx;color: #999999;margin-top: 26rpx;">业绩比较基准</text>
						</view>
						<view class="right">
							<text class="r_text">远见开放19（号去物业团区委）</text>
							<view class="three_text">
								<view class="tt">1万元起购</view>
								<view class="tt">稳健收益</view>
								<view class="tt">净值型</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 财富头条 -->
			<view class="main_wealth">
				<!-- 内容标题 -->
				<view class="wealth_headline">
					<view class="blue"></view>
					<view class="title">
						<text>财富头条</text>
					</view>
				</view>

				<view class="wealth_concent">
					<view class="list_content" v-for="item in 4" :key="item">
						<view class="content_left">
							<view class="left_one">
								<image src="../../static/index/head001.png" mode=""
									style="margin-right: 20rpx; width: 56rpx;height: 56rpx;vertical-align: middle;">
								</image>
								<text>华兴债券</text>
							</view>
							<view class="left_two">
								<text>手里闲钱合理利用能让他机智翻倍</text>
							</view>
							<view class="left_three">
								<text>这是一个很长的标题这是一个很长的标题这是一个很长的标题这是一个很长的标题</text>
							</view>
							<view class="left_four">
								<text>为您推荐</text>
								<uni-icons type="smallcircle-filled" color="#c0c0c0" size="7"></uni-icons>
								<text>12小时前</text>
							</view>
						</view>
						<view class="content_right">
							<view style="margin: 20rpx 0;">
								<image src="../../static/index/particulars001.png" mode=""
									style="width: 200rpx;height: 200rpx;"></image>
							</view>
							<view style="text-align: right;padding-right: 10rpx;">
								<uni-icons type="more-filled" size="15"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navData: [{
						id: 1,
						src: "../../static/index/nav2.png",
						title: "基金",
						url: '../fund/fund'
					},
					{
						id: 2,
						src: "../../static/index/nav3.png",
						title: "股票",
						url: ''
					},
					{
						id: 3,
						src: "../../static/index/nav4.png",
						title: "借钱",
						url: ''
					},
					{
						id: 4,
						src: "../../static/index/nav5.png",
						title: "保障",
						url: ''
					},
					{
						id: 5,
						src: "../../static/index/nav1.png",
						title: "签到",
						url: ''
					},
					{
						id: 6,
						src: "../../static/index/nav6.png",
						title: "抽红包",
						url: ''
					},
					{
						id: 7,
						src: "../../static/index/nav7.png",
						title: "信用卡",
						url: ''
					},
					{
						id: 8,
						src: "../../static/index/nav8.png",
						title: "活期理财",
						url: '../current/current'
					},
					{
						id: 9,
						src: "../../static/index/nav9.png",
						title: "税代计算",
						url: ''
					},
					{
						id: 10,
						src: "../../static/index/nav10.png",
						title: "客服",
						url: ''
					},
				],
				nav_show: 0,
				currentData:[
					{id:1,type:'活期理财',title:'国金众赢货币',title_mt:'优选货基',prcent:'3.90%',prent_title:'七日年化收益率',title_type:'灵活申赎',title_text:'低风险 100元起购'},
					{id:2,type:'活期理财',title:'国金众赢货币',title_mt:'优选货基',prcent:'3.90%',prent_title:'七日年化收益率',title_type:'灵活申赎',title_text:'低风险 100元起购'},
				]
			}
		},
		onReady() {

		},
		methods: {
			mean(data) {
				uni.navigateTo({
					url: data
				})
			},
			// swiper切换
			changtap(num) {
				this.nav_show = num;
			},
			huan(e) {
				this.nav_show = e.detail.current;
			},
			borrow(){
				uni.switchTab({
					url:"../borrow/borrow"
				})
			},
			toCurrentMess(data){
				uni.navigateTo({
					url: '../currentMess/currentMess?data='+data
				})
			}
		}
	}
</script>

<style lang="scss">
	// 安卓头部
	/* #ifndef MP-WEIXIN */
	.header {
		box-sizing: border-box;
		width: 100%;

		.header_left {
			font-size: 25px;
			font-weight: 700;
			text-align: center;
			margin: 0 auto;
		}

		.header_search {
			flex: 1;
			display: flex;
			align-items: center;
			background-color: #fff;
			height: 28px;
			line-height: 28px;
			border-radius: 20px;

			.search_icon {
				margin: 0 12px;
				width: 12pt;
				height: 12pt;
			}

			.search_input {
				color: black;
			}
		}

		.header_right {
			display: flex;
			align-items: center;
			justify-content: space-around;

			image {
				margin: 0 4px;
				width: 20px;
				height: 20px;
			}
		}
	}

	/* #endif */

	// 微信头部
	/* #ifdef MP-WEIXIN */

	.header {
		display: flex;
		background-color: $uni-bg-color-header;
		align-items: center;
		padding: 15rpx 0;

		.header_left {
			padding: 0 30rpx;
			font-size: 40rpx;
			font-weight: 700;
			color: white;
		}

		.header_search {
			flex: 1;
			display: flex;
			align-items: center;
			background-color: #fff;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;

			.search_icon {
				margin: 20rpx;
				width: 24rpx;
				height: 24rpx;

			}

			.search_input {
				color: black;
			}

		}

		.header_right {
			display: flex;
			align-items: center;
			justify-content: space-around;

			image {
				margin: 0 12rpx;
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	/* #endif */

	// 轮播图
	.banner_bg {
		background-color: $uni-bg-color-header;
		height: 160rpx;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		position: relative;

		// 轮播图
		.banner {
			position: absolute;
			top: 40rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
			height: 240rpx;
			width: 700rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.swiper-item {
				width: 700rpx;
				height: 240rpx;
			}
		}
	}

	// 导航栏
	.nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		box-sizing: border-box;
		padding: 160rpx 26rpx 0;
		background-color: white;

		.nav_contents {
			display: flex;
			flex-direction: column;
			align-items: center;

			width: 120rpx;
			margin-bottom: 30rpx;

			image {
				width: 88rpx;
				height: 88rpx;
			}

			.nav_title {
				margin-top: 18rpx;
				color: #666666;
				font-size: 24rpx;
			}
		}

	}

	// 第一行
	.main_stock {
		margin: 20rpx 30rpx;
		box-sizing: border-box;
		padding: 0rpx 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	//主要内容
	.main {
		background-color: #fff;

		// 第一模块
		.main_treasure {
			box-sizing: border-box;
			padding: 0 26rpx;

			.treasure_headline {
				display: flex;
				align-items: center;
				height: 30rpx;
				padding: 40rpx 0;

				.blue {
					margin-right: 10rpx;
					width: 8rpx;
					height: 30rpx;
					background-color: $uni-bg-color-header;
					border-radius: 4rpx;
				}

				.title {
					font-size: 32rpx;
					color: #000000;
					font-weight: 700;
				}
			}

			.treasure_concents {
				display: flex;
				justify-content: space-between;
				height: 400rpx;

				.concents_left {
					box-sizing: border-box;
					padding: 24rpx;
					width: 340rpx;
					height: 395rpx;
					background: url(../../static/index/main-bg01.png) no-repeat;
					background-size: 340rpx 395rpx;
					color: #fff;

					.left_btn {
						width: 180rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 30rpx;
						background-color: #ff7846;
						color: white;
						border-radius: 30rpx;
					}
				}

				.concents_right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 330rpx;

					// height: 100%;
					.right_top {
						box-sizing: border-box;
						padding: 24rpx;
						height: 190rpx;
						background: url(../../static/index/main-bg08.png) no-repeat;
						background-size: 100%;

						.right_btn {
							margin-top: 20rpx;
							width: 174rpx;
							height: 48rpx;
							line-height: 48rpx;
							text-align: center;
							font-size: 26rpx;
							background-color: #ff7846;
							color: white;
							border-radius: 30rpx;
						}

					}

					.right_bottom {
						box-sizing: border-box;
						padding: 24rpx;
						height: 190rpx;
						background: url(../../static/index/main-bg03.png) no-repeat;
						background-size: 100%;

						.right_btn {
							margin-top: 20rpx;
							width: 174rpx;
							height: 48rpx;
							line-height: 48rpx;
							text-align: center;
							font-size: 26rpx;
							background-color: #ff7846;
							color: white;
							border-radius: 30rpx;
						}
					}
				}
			}
		}

		// 第二模块
		.main_loans {
			box-sizing: border-box;
			padding: 0 26rpx;

			.loans_headline {
				display: flex;
				align-items: center;
				height: 30rpx;
				padding: 40rpx 0;

				.blue {
					margin-right: 10rpx;
					width: 8rpx;
					height: 30rpx;
					background-color: $uni-bg-color-header;
					border-radius: 4rpx;
				}

				.title {
					font-size: 32rpx;
					color: #000000;
					font-weight: 700;
				}
			}

			.loans_concents {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 30rpx;
				width: 100%;
				height: 222rpx;
				background-color: #f3f7fe;
				border-radius: 20rpx;

				.concents_bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.right_btn {
						width: 210rpx;
						height: 60rpx;
						color: #fff;
						font-size: 28rpx;
						line-height: 60rpx;
						text-align: center;
						background-color: #4693ef;
					}
				}
			}
		}

		//第三模块
		.main_money {
			box-sizing: border-box;
			padding: 0 26rpx;

			.money_headline {
				display: flex;
				align-items: center;
				height: 30rpx;
				padding: 40rpx 0;

				.blue {
					margin-right: 10rpx;
					width: 8rpx;
					height: 30rpx;
					background-color: $uni-bg-color-header;
					border-radius: 4rpx;
				}

				.title {
					font-size: 32rpx;
					color: #000000;
					font-weight: 700;
				}

				.more {
					text-align: right;
					flex-grow: 1;
					flex-shrink: 1;
				}
			}

			.money_concents {
				.concents_top {
					display: flex;
					justify-content: space-between;

					.top_title {
						width: 144rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
						color: #a3a3a3;
						border-radius: 10rpx;
					}

					.active {
						background-color: $uni-bg-color-header;
						color: #fff;
					}
				}

				.concents_centre {
					box-sizing: border-box;
					padding: 0 30rpx;
					box-shadow: 0 0 100rpx 1rpx #f5f5f5;

					.centre_centent {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						margin: 40rpx 0;


						.top_title {
							.title_mt {
								display: inline-block;
								width: 104rpx;
								height: 36rpx;
								line-height: 36rpx;
								text-align: center;
								background-color: #fcf5ec;
								color: #d8b077;
								font-size: 20rpx;
							}
						}

						.bottom_title {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.title_btn {
								width: 174rpx;
								height: 64rpx;
								line-height: 64rpx;
								text-align: center;
								background-color: #3476f1;
								border-radius: 4rpx;
								color: #fff;
							}
						}
					}
				}

			}
		}

		//第四模块
		.main_recommend {
			.recommend_headline {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				height: 30rpx;
				padding: 40rpx 26rpx;

				.blue {
					margin-right: 10rpx;
					width: 8rpx;
					height: 30rpx;
					background-color: $uni-bg-color-header;
					border-radius: 4rpx;
				}

				.title {
					font-size: 32rpx;
					color: #000000;
					font-weight: 700;
				}

				.more {
					text-align: right;
					flex-grow: 1;
					flex-shrink: 1;
				}
			}

			.recommend_concents {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				background-color: #efefef;
				width: 1300rpx;
				height: 300rpx;

				.concents_modules {
					box-sizing: border-box;
					padding: 30rpx;
					background-color: white;
					width: 300rpx;
					height: 260rpx;
					border-radius: 20rpx;

					.modules_titleone {
						text-align: center;
						font-size: 28rpx;
						font-weight: 700;
					}

					.modules_titletwo {
						text-align: center;
						margin-top: 15rpx;
						font-size: 44rpx;
						color: #f85656;
						font-weight: 700;
					}

					.modules_titlethree {
						text-align: center;
						margin-top: 15rpx;
						font-size: 24rpx;
						color: #999;
					}

					.modules_titlefour {
						text-align: center;
						margin-top: 15rpx;
						font-size: 20rpx;

						.text {
							display: inline-block;
							box-sizing: border-box;
							margin: 0 5rpx;
							padding: 6rpx;
							height: 40rpx;
							line-height: 27rpx;
							text-align: center;
							background-color: #eaf1fe;
							color: #3476f1;
							border-radius: 4rpx;
						}
					}
				}
			}
		}

		//第五模块
		.main_optimization {
			background-color: #efefef;

			.optimization_headline {
				background-color: #fff;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				height: 30rpx;
				padding: 40rpx 26rpx;

				.blue {
					margin-right: 10rpx;
					width: 8rpx;
					height: 30rpx;
					background-color: $uni-bg-color-header;
					border-radius: 4rpx;
				}

				.title {
					font-size: 32rpx;
					color: #000000;
					font-weight: 700;
				}
			}

			.optimization_concent {
				width: 710rpx;
				margin: 0rpx auto;
				box-sizing: border-box;

				.list_sty {
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 30rpx;
					// margin: 20rpx 0;
					background-color: #fff;
					border: 1rpx solid #efefef;
					border-radius: 20rpx;

					.right {
						width: 340rpx;

						.r_text {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							font-weight: 700;
						}

						.three_text {
							display: flex;
							justify-content: space-between;
							margin-top: 26rpx;

							.tt {
								box-sizing: border-box;
								padding: 6rpx;
								background-color: #eaf1fe;
								color: #3476F1;
								font-size: 20rpx;
								border-radius: 4rpx;
							}
						}
					}
				}
			}
		}

		//第六模块
		.main_wealth {
			background-color: #efefef;

			.wealth_headline {
				background-color: #fff;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				height: 30rpx;
				padding: 40rpx 26rpx;

				.blue {
					margin-right: 10rpx;
					width: 8rpx;
					height: 30rpx;
					background-color: $uni-bg-color-header;
					border-radius: 4rpx;
				}

				.title {
					font-size: 32rpx;
					color: #000000;
					font-weight: 700;
				}
			}

			.wealth_concent {
				background-color: #efefef;

				.list_content {
					width: 702rpx;
					// height: 284rpx;
					margin: 20rpx auto;
					background-color: #fff;
					box-sizing: border-box;
					padding: 24rpx;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.content_left {
						width: 400rpx;

						.left_one {
							vertical-align: middle;
							font-size: 28rpx;
							color: #999;
						}

						.left_two {
							margin-top: 22rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							font-weight: 700;
							color: #333;
						}

						.left_three {
							margin-top: 16rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							color: #c0c0c0;
						}

						.left_four {
							margin-top: 30rpx;
							color: #c0c0c0;
							vertical-align: middle;
						}
					}
				}
			}
		}
	}
</style>
